<template>
  <div>
    <!--面包屑-->
    <!------------------------面包屑--------------------------->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 4px">
      <el-breadcrumb-item :to="{path:'/'}"><i class="el-icon-help"></i>在线考试</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/'}">我的考试</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--表格开始-->
    <el-table :border="true"
        :data="examArr"
        style="width: 100%">
      <el-table-column
          align="center"
          show-overflow-tooltip
          fixed
          prop="examName"
          label="考试名称"
          width="120">
      </el-table-column>
<!--   examDesc   -->
      <el-table-column
          header-align="center"
          show-overflow-tooltip
          fixed
          prop="examDesc"
          label="考试介绍">
      </el-table-column>
      <el-table-column
          align="center"
          show-overflow-tooltip
          prop="majorName"
          label="所属专业"
          width="150">
      </el-table-column>
      <el-table-column
          align="center"
          show-overflow-tooltip
          prop="classNames"
          label="班级"
          width="150">
      </el-table-column>
      <el-table-column
          align="left"
          prop="starTime"
          label="考试时间开始时间"
          width="180">
      </el-table-column>
      <el-table-column
          align="center"
          prop="duration"
          label="考试时间"
          width="180">
      </el-table-column>
      <el-table-column
          align="center"
          prop="totalScore"
          label="考试总分"
          width="80">
      </el-table-column>
      <el-table-column
          align="center"
          prop="passScore"
          label="及格分数"
          width="80">
      </el-table-column>
      <el-table-column
          label="操作"
          width="150"
          align="center">
                <template slot-scope="scope">
                  <el-button v-if="new Date(scope.row.starTime)<timeNow && new Date(scope.row.endTime)>timeNow"  size="mini" type="primary" @click="openEditDialog(scope.row)">开始考试</el-button>
                  <el-button v-if="new Date(scope.row.starTime)>timeNow"  size="mini" type="warning" :disabled="true">考试未开始</el-button>
                  <el-button v-if="new Date(scope.row.endTime)<timeNow"  size="mini" type="danger" :disabled="true">考试已结束</el-button>
                </template>
      </el-table-column>
    </el-table>
    <!-------------- 表格结束 ------------------ -->

    <div style="text-align: right;margin: 20px auto">
      <el-pagination
          layout="total,prev, pager, next"
          @current-change="changePage"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize">
      </el-pagination>
    </div>
    <el-dialog title="请输入密码" :visible.sync="inputPasswordDialog">
      <el-input type="password" v-model="verifyPassword" placeholder="请输入密码"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="inputPasswordDialog = false">取 消</el-button>
        <el-button type="primary" @click="verifyPasswordMes()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeNow:new Date(),
      examArr:[],
      localUser:{},
      total:0,
      pageSize:0,
      currentPage:1,
      verifyPassword:'',
      exam:{},
      inputPasswordDialog:false,
      goExamBoolean:false
    }
  },
  methods:{
    changePage(value){
        console.log(this.currentPage)
        this.$router.replace("?page="+value);
        //this.LoadExamArr();
    },
    openEditDialog(exam){
      this.exam = exam;
      console.log(exam)
      if(this.exam.type==1){
        this.goExamBoolean = true;
        this.getExamById();
      }else {
        this.inputPasswordDialog = true;
      }
    },
    verifyPasswordMes(){
      let verifyExam = {
        id:this.exam.id,
        password:this.verifyPassword
      }
      let url = "http://localhost:9283/exam/verify-password";
      let jwt = localStorage.getItem("localJwt");
      this.axios
          .create({
            'headers':{
              'Authorization':jwt
            }
          }).post(url,verifyExam).then((response)=> {
        let jsonResult = response.data;
        if(jsonResult.state==20000){
          this.goExamBoolean = true;
          this.inputPasswordDialog = false;
          this.getExamById();
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        }else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },
    //验证成功后跳转
    getExamById(){
      if(this.goExamBoolean){
       this.$router.push('/exam-examStart?examId='+this.exam.id);
      }
    },
    LoadExamArr(){
      let page = this.$router.currentRoute.query.page;
      if(page<1||page==null){
        page=1;
      }
      let param = {
        id:this.localUser.id,
        className:this.localUser.className
      }
      console.log(param)
      param = this.qs.stringify(param)
      let url = "http://localhost:9283/exam/list-className/"+page+"?"+param;
      let jwt = localStorage.getItem("localJwt");
      this.axios
          .create({
            'headers':{
              'Authorization':jwt
            }
          }).get(url).then((response)=> {
        let jsonResult = response.data;
        if(jsonResult.state==20000){
          if(jsonResult.data.list.length==0){
            let page= +this.$router.currentRoute.query.page-1;
            if(page>2){
              this.$router.replace("?page="+this.$router.currentRoute.query.page-1);
            }
          }
          this.examArr = jsonResult.data.list;
          console.log(this.examArr)
          console.log(this.examArr)
          this.total = jsonResult.data.total;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },
    LoadUser(){
      this.localUser = JSON.parse(localStorage.getItem("localUser"));
      this.LoadExamArr()
      console.log(this.localUser)
    },
  },
  mounted() {
    this.LoadUser();
  }

}
</script>

<style scoped>

</style>
